<template>
	<view class="root">
		<uni-popup 
			class="popup"
			ref="popup" 
			type="bottom" 
			border-radius="10px 10px 0 0"
			>
			<view class="container">
				<view class="header">
					<image src="../../static/icon/notepad-icon.png" mode=""></image>
					<view class="name">小程序名称</view>
					<view class="text">申请</view>
				</view>
				<view class="main">
					<view class="title-tip">
						获取你的具体位置信息
					</view>
					<view class="content-tip">
						将获取你的具体位置信息，用于上门回收
					</view>
					<view class="button-area">
						<button class="reject">拒绝</button>
						<button class="agree">允许</button>
					</view>
				</view>
				<view class="footer">
					<label class="radio">
						<radio value="" /><text></text>
					</label>
					<view class="agree-text">
						已阅读并接受
					</view>
					<view class="protocol">
						《小程序名称隐私保护指引》
					</view>
				</view>
			</view>
		</uni-popup>
		<button @click="open">获取定位</button>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const popup = ref(null)

	function open(){
        popup.value.open('bottom')
    }

</script>

<style lang="scss" scoped>

	.root {
		
		.popup {
			.container {
				padding: 30rpx;
				background-color: white;
				border-radius: 50rpx;
				height: 600rpx;
				display: flex;
				flex-direction: column;
				gap: 40rpx;
				.header {
					display: flex;
					align-items: center;
					gap: 10rpx;
					font-weight: 700;
					image {
						width: 100rpx;
						height: 100rpx;
					}
					.name {
						margin-right: 20rpx;
						font-size: 36rpx;
						
					}
					.text {
						
					}
				}
				.main {
					height: 210rpx;
					display: flex;
					flex-direction: column;
					gap: 30rpx;
					.title-tip {
						font-weight: 700;
						font-size: 34rpx;
					}
					.content-tip {
						font-weight: 700;
						color: #9a9a9a;
					}
					.button-area {
						display: flex;
						padding: 0 50rpx;
						button {
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 20rpx;
							width: 250rpx;
							height: 80rpx;
							font-weight: 700;
						}
						.reject {
							background-color: white;
						}
						.agree {
							background-color: #2ec076;
							color: white;
						}
					}
				}
				.footer {
					display: flex;
					font-size: 30rpx;
					justify-content: center;
					align-items: center;
					.radio {
						
					}
					.agree-text {
						
					}
					.protocol {
						color: #bdcedf;
					}
				}
				
			}
		}
	}
	
	
</style>